﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Employee Info Manager</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>

    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
    <button type="button" onclick="getAllEmployees()">Get All Employees</button>
    <div class="accordion" id="accordion2">
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                    <div class="row">
                        <div class="span6">
                            All Employees
                        </div>
                    </div>
                </a>
            </div>
            <div id="collapseOne" class="accordion-body collapse in">
                <div class="accordion-inner">
                    <div id="allEmployees"></div>
                </div>
            </div>
        </div>
    </div>
    <script language="javascript" type="text/javascript">
        function getAllEmployees() {
            $.post('getAllEmployees.php', {}, function (data) {
                var allEmployees = document.getElementById("allEmployees");
                parseResults(allEmployees, data)
            });
        }
        function getEmployee(id) {
            $.post('getEmployee.php', { EmpID: id }, function (data) {
                parseResult(id, data);
            });
        }
        function parseResults(allEmployees, data) {
            var jsonData = eval(data);
            var newRow = "";
            if (jsonData.length > 0) {
                newRow = ""
                ;

                for (var i = 0; i < jsonData.length; i++) {
                    var row = jsonData[i];
                    var tmp = "";
                    tmp = encloseInAccordion(row);
                    tmp = encloseInSpanX(tmp, 6);
                    tmp = encloseInRow(tmp);
                    newRow += tmp;
                }
            }
            else {
                newRow = "No data found";
            }
            allEmployees.innerHTML = newRow;
        }
        function parseResult(id, data) {
            var jsonData = eval(data);
            document.getElementById("EmpFname" + id).value = jsonData[0].EmpFname;
            document.getElementById("EmpLname" + id).value = jsonData[0].EmpLname;
            document.getElementById("StartDate" + id).value = jsonData[0].StartDate;
            document.getElementById("EndDate" + id).value = jsonData[0].EndDate;
            document.getElementById("EmpStatus" + id).value = jsonData[0].EmpStatus;
            document.getElementById("Address" + id).value = jsonData[0].Address;
            document.getElementById("Email" + id).value = jsonData[0].Email;
            document.getElementById("PhoneNum" + id).value = jsonData[0].PhoneNum;
            document.getElementById("ManagerID" + id).value = jsonData[0].ManagerID;
        }
        function encloseInSpanX(content, x) {
            var outString = "<div class=\"span" + x + "\">";
            outString += content;
            outString += "</div>";
            return outString;
        }
        function encloseInRow(content) {
            var outString = "<div class=\"row\">";
            outString += content;
            outString += "</div>";
            return outString;
        }
        function encloseInAccordion(row) {
            var outString = "<div class=\"accordion\" id=\"accordion" + row.EmpID + "\">" +
            "<div class=\"accordion-group\">" +
            "<div class=\"accordion-heading\">" +
            "<a class=\"accordion-toggle\" data-toggle=\"collapse\" data-parent=\"#accordion" + row.EmpID + "\" href=\"#collapse" + row.EmpID + "\">" +
            "<div class=\"row\">" +
            "<div class=\"span4\" id=\"nameHeader" + row.EmpID + "\">";
            outString += row.EmpFname + " " + row.EmpLname;
            outString += "</div></div></a></div>";
            var tmp = generateContent(row);
            outString += tmp;
            outString += "</div></div>";
            return outString;
        }
        function generateContent(row) {
            var outString = "<div id=\"collapse" + row.EmpID + "\" class=\"accordion-body collapse\">" +
                "<div class=\"accordion-inner\">" +
                    "<div id=\"content" + row.EmpID + "\">";

            outString += createInputPair(row.EmpFname, "EmpFname", row.EmpID, "First Name");
            outString += createInputPair(row.EmpLname, "EmpLname", row.EmpID, "Last Name");
            outString += createInputPair(row.StartDate, "StartDate", row.EmpID, "Start Date");
            outString += createInputPair(row.EndDate, "EndDate", row.EmpID, "End Date");
            outString += createInputPair(row.EmpStatus, "EmpStatus", row.EmpID, "Status");
            outString += createInputPair(row.Address, "Address", row.EmpID, "Address");
            outString += createInputPair(row.Email, "Email", row.EmpID, "Email");
            outString += createInputPair(row.PhoneNum, "PhoneNum", row.EmpID, "Phone Number");
            outString += createInputPair(row.ManagerID, "ManagerID", row.EmpID, "Manager");

            //Save & Reset
            fieldRow = encloseInSpanX(createResetButton(row.EmpID), 2) + encloseInSpanX(createSaveButton(row.EmpID), 2);
            fieldRow = encloseInRow(fieldRow);
            outString += fieldRow;

            outString += "</div></div></div>";
            return outString;
        }
        function createInputPair(data, fieldName, id, fieldDesc) {
            var outString = data;
            outString = createInputWithDefaultValue(fieldName, outString, id);
            outString = encloseInSpanX(fieldDesc, 1) + encloseInSpanX(outString, 3);
            outString = encloseInRow(outString);
            return outString;
        }
        function createInputWithDefaultValue(fieldName, defaultValue, id) {
            var outString = "<input id=\"" + fieldName + id + "\" type=\"text\" value=\"" + defaultValue + "\"/>";
            return outString;

        }
        function createSaveButton(id) {
            var outString = "<button type=\"button\" onclick=\"saveChanges(" + id + ")\" >Save Changes</button>";
            return outString;
        }
        function saveChanges(id) {
            var EmpFname = document.getElementById("EmpFname" + id).value;
            var EmpLname = document.getElementById("EmpLname" + id).value;
            var StartDate = document.getElementById("StartDate" + id).value;
            var EndDate = document.getElementById("EndDate" + id).value;
            var EmpStatus = document.getElementById("EmpStatus" + id).value;
            var Address = document.getElementById("Address" + id).value;
            var Email = document.getElementById("Email" + id).value;
            var PhoneNum = document.getElementById("PhoneNum" + id).value;
            var ManagerID = document.getElementById("ManagerID" + id).value;

            $.post('updateEmployeeInfo.php', {
                EmpID: id,
                EmpFname: EmpFname,
                EmpLname: EmpLname,
                StartDate: StartDate,
                EndDate: EndDate,
                EmpStatus: EmpStatus,
                Address: Address,
                Email: Email,
                PhoneNum: PhoneNum,
                ManagerID: ManagerID
            }, function (data) {
                document.getElementById("nameHeader" + id).innerHTML = EmpFname + " " + EmpLname;
            });
        }
        function createResetButton(id) {
            var outString = "<button type=\"button\" onclick=\"resetChanges(" + id + ")\" >Reset Changes</button>";
            return outString;
        }
        function resetChanges(id) {
            getEmployee(id);
        }
    </script>
</body>
</html>
